作品二：qiankun 微前端集成平台
在线体验
一、定位与价值
| 视角 | 说明 |
|---|---|
| 组织 | 多团队、多仓库、Vue / React 技术栈并存 时的门户整合 |
| 交付 | 子应用 独立开发、独立部署，集成环境统一域名与登录态 |
| 演进 | 老系统渐进迁移：先嵌微应用，再替换模块，降低大爆炸重写风险 |
对应仓库：projects/micro-project（宿主 + micro-vue + micro-react）。
二、架构透视
text
主应用（Vue 3 + qiankun）
├── 路由 / 菜单 / 全局状态 / 登录
├── 子应用 micro-vue（Vue 3 + Vite）
└── 子应用 micro-react（React 19 + TDesign）
↓
Nginx 按路径挂载各子应用静态资源（/micro-project/...）关键点：子应用 base / publicPath 必须与 线上 location 完全一致，否则刷新与子资源路径会 404。
三、技术栈
| 层级 | 选型 |
|---|---|
| 微前端框架 | qiankun（基于 single-spa） |
| 宿主 | Vue 3、TypeScript、Vue Router |
| 子应用 | Vue 3；React 19（演示 豆包式对话 打字机与流式 UI 占位） |
| 构建 | pnpm workspace、Vite |
| 集成环境 | Docker Compose + Nginx |
四、能力与设计取舍
| 维度 | 说明 |
|---|---|
| 隔离 | JS 沙箱 / 样式隔离策略随 qiankun 版本演进；仍建议 BEM、CSS Modules 降低污染 |
| 通信 | 本仓库采用企业级 Bridge 契约（包 @micro-fe/bridge）：宿主用 Pinia 持有真相源，子应用只依赖 MicroHostBridge（getSnapshot / subscribe / dispatch），不再通过 props 传递宿主 Pinia 实例。 |
| 性能 | 子应用按需加载；预加载策略平衡首屏与带宽 |
| 演示页 | Vue 子应用内 流式对话 UI：requestAnimationFrame 节流输出、粘底滚动、可中断，便于替换为 SSE |
五、运维与灰度
- 子应用独立发版时，只需更新对应 静态目录 与 版本资源指纹。
- 回滚时可单独切换子应用构建产物，宿主保持稳定。